<!--
 * @Date: 2023-02-09 16:54:59
 * @LastEditTime: 2023-03-16 15:46:50
 * @FilePath: /hash-guess-game/src/views/clubMember/clubMember.vue
 * 介绍:俱乐部成员
-->
<script lang="ts" setup>
import {
  apiGameMember,
  apiGenr,
  Genr,
  GameMember,
} from "@@/api/module/clubMember";
import { omitText } from "@@/utils/tools/project";
import { formatNumber } from "@@/utils/tools/tools";
import dayjs from "dayjs";
import { t } from "@@/hooks/useI18n";

const tabs = [
  {
    title: t("sai-ji-cheng-yuan"),
    key: 0,
    api: apiGameMember,
  },
  {
    title: t("yuan-lao-hui"),
    key: 1,
    api: apiGenr,
  },
];
const currentTab = ref<StrNumber>();
</script>

<template>
  <div class="clubMember auto-mt">
    <h4>{{ $t("ju-le-bu-chen-yuan") }}</h4>
    <Tabs v-model:active="currentTab">
      <template #nav-bottom>
        <Card gap="solid">
          <div class="list_title list-layout">
            <div>{{ $t("can-yu-shi-jian") }}</div>
            <div>{{ $t("hui-yuan-bian-hao") }}</div>
            <div>{{ $t("sai-ji-0") }}</div>
          </div>
        </Card>
      </template>
      <VanTab
        v-for="tab in tabs"
        :title="$t(tab.title)"
        :name="tab.key"
        :key="tab.key"
      >
        <Card>
          <PagingList :api="tab.api">
            <template
              #item="{
                item,
              }: { item: Genr.ResItem | GameMember.ResItem } & {
                item: unknownObj,
              }"
            >
              <div class="List_item list-layout">
                <div class="T-S-sm">
                  {{ dayjs(item.created_at).format("MM-DD HH:mm") }}
                </div>
                <CopyText :copy-text="item.address" class="T-S-sm">
                  {{ omitText(item.address) }}
                </CopyText>
                <div class="T-S-sm">
                  <div class="List_item_number">
                    {{ formatNumber(item.level as any, 0) }}
                  </div>
                </div>
              </div>
            </template>
          </PagingList>
        </Card>
      </VanTab>
    </Tabs>
  </div>
</template>

<style lang="less" scoped>
h4 {
  text-align: center;
  margin-bottom: var(--gap-md);
}

.PagingList {
  .List_item {
    padding: var(--gap-md) 0;
    border-bottom: 2rem solid var(--C-T1);
  }
}
.Tabs {
  .Card {
    margin-top: var(--gap-sm);
  }
}
.List_item_number {
  background-color: var(--C-M1);
  border-radius: 0.3em;
  padding: 0 1em;
}
</style>
